<template>
	<view class="content">
		<view class="input-box">
			<view class="head-tit">用户登录</view>
			<view class="input1-box">
				<input class="inp-name" focus v-model="inpName" maxlength="12" placeholder="用户名/手机号" placeholder-style="color: #999;"/>
				<text v-if="inpName == ''"></text>
				<uni-icons v-else class="icons1" @click="inpName = ''" type="closeempty" size="18" color="#f18b49"></uni-icons>
			</view>
			<view class="input2-box">
				<input class="inp-pwd" v-model="inpPwd" maxlength="16" type="password" placeholder="密码" placeholder-class="inp-pwd-place"/>
				<text v-if="inpPwd == ''"></text>
				<uni-icons v-else class="icons2" @click="inpPwd = ''" type="closeempty" size="18" color="#f18b49"></uni-icons>
			</view>
			<view class="txt-box">
				<navigator url="/pages/login/code-login">
					<view>验证码登录</view>
				</navigator>
				<navigator url="/pages/login/forget-pwd">
					<view>忘记密码?</view>
				</navigator>
				<navigator url="/pages/login/register">
					<view>新用户注册</view>
				</navigator>
			</view>
			<view class="bot-btn-my">
				<view class="login-btn-my" @click="login()">确认登录</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				token:'',
				inpPwd: '',
				mobile: '',
				inpName: '',
			}
		},
		onShow(){
			if(uni.getStorageInfoSync('mobile')){
				this.inpName = uni.getStorageSync('mobile')
			} else {
				this.inpName = uni.getStorageSync('username')
			}
		},
		methods: {
			uniShowToast(tit){
				uni.showToast({
					title: tit,
					duration: 1500,
					icon: 'none'
				})
			},
			// 登录
			login(){
				let mobReg = /^[1][3,4,5,7,8,9][0-9]{9}$/
				if(this.inpName == '' && this.inpPwd == ''){
					this.uniShowToast('请完整填写登录信息')
				} else if(this.inpName == ''){
					this.uniShowToast('手机号/用户名不能为空')
				} else if(this.inpPwd == ''){
					this.uniShowToast('密码不能为空')
				} else {
					if(mobReg.test(this.inpName)){
						this.$http('/gjcApi/userLogin', { mobile: this.inpName, password: this.inpPwd }, res => {
							if(res.state == true){
								this.nameOrmobile(res)
							} else if(res.code == 411){
								this.uniShowToast('手机号不存在')
							} else if(res.code == 410){
								this.uniShowToast('密码错误')
							}
						})
					 } else {
						this.$http('/gjcApi/userLogin', { username: this.inpName, password: this.inpPwd }, res => {
							if(res.state == true){
								this.nameOrmobile(res)
							} else if(res.code == 413){
								this.uniShowToast('用户名不存在')
							}else if(res.code == 414){
								this.uniShowToast('该账号已在别的地方登录,请确认!')
							} else if(res.code == 410){
								this.uniShowToast('密码错误')
							}
						})
					}
				}
			},
			// 验证用户名、密码
			nameOrmobile(res) {
				uni.setStorageSync('token', res.token)
				uni.setStorageSync('password', this.inpPwd)
				if(res.way == 'mobile'){
					uni.setStorageSync('mobile', this.inpName)
					uni.setStorageSync('username', res.name)
					this.$http('/gjcApi/verifyToken', { username: res.name, token: res.token }, ress => {
						uni.setStorageSync('userid', ress.user_id)
					})
				} else if(res.way == 'username'){
					uni.setStorageSync('username', this.inpName)
					this.$http('/gjcApi/verifyToken', { username: res.name, token: res.token }, ress1 => {
						uni.setStorageSync('userid', ress1.user_id)
					})
				}
				uni.showToast({
					title: '验证中...',
					icon: 'loading'
				})
				setTimeout(() => {
					uni.hideToast()
					uni.showToast({
						title: '登录成功',
						icon: 'none',
					})
					setTimeout(() =>{
						uni.hideToast()
						uni.navigateBack({
							delta: 1
						})
					},1000)
				},1000)
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background: $uni-model-color;
	}
	.content{
		padding: 60rpx;
		.input-box{
			.head-tit{
				font-size: 44rpx;
				margin-bottom: 30rpx;
				letter-spacing: 4rpx;
				color: $uni-text-color;
			}
			input{
				padding: 20rpx 0;
				border-bottom: 2rpx solid $uni-text-color;
			}
			.input1-box{
				position: relative;
				.inp-name{
					margin-bottom: 5rpx;
					padding-left: 4rpx;
					letter-spacing: 2rpx;
				}
				.icons1{
					position: absolute;
					bottom: 20rpx;
					right: 15rpx;
				}
			}
			.input2-box{
				position: relative;
				.inp-pwd{
					letter-spacing: 15rpx;
					padding-left: 4rpx;
				}
				.inp-pwd-place{
					color: #999;
					letter-spacing: 2rpx;
				}
				.icons2{
					position: absolute;
					bottom: 20rpx;
					right: 15rpx;
				}
			}
			.bot-btn-my{
				.login-btn-my{
					padding: 20rpx 0;
					margin-top: 40rpx;
					text-align: center;
					background: #ff914d;
					border-radius: 10rpx;
					letter-spacing: 20rpx;
					color: $uni-model-color;
				}
			}
		}
		.txt-box{
			display: flex;
			font-size: 24rpx;
			font-weight: bold;
			margin-top: 40rpx;
			align-items: center;
			justify-content: space-between;
		}
	}
</style>